<template>
	<view class="wrap">
		<view class="cellGroupAdmin">
			<view v-if="false">
				<view class="u-flex u-col-center u-row-between u-flex-1">
					<text>微信头像</text>
					<view style="width: 72rpx;"><!-- @click="uploadAvatar" -->
						<u-image :src="userInfo.avatarUrl || 'https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/默认头像.png'" :lazy-load="true" mode="scaleToFill" radius="10" width="72rpx" height="72rpx"></u-image>
					</view>
				</view>
				<image src="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/image/arrow-gray.png"></image>
			</view>
			<view>
				<view class="u-flex u-col-center u-row-between u-flex-1">
					<text>用户昵称：</text>
					<u-input
					    placeholder="请输入用户昵称"
					    border="surround"
					    v-model="userInfo.wxName"
					></u-input>
				</view>
			</view>
			<view>
				<view class="u-flex u-col-center u-row-between u-flex-1">
					<text>手机号码：</text>
					<u-input
						placeholder="请输入手机号码"
						border="surround"
						v-model="userInfo.wxPhone"
					></u-input>
					<div class="u-border" style="margin-left: 10px;height: 38px;border-radius: 4px;overflow: hidden;">
						<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" size="mini" type="primary" style="height: 100%;line-height: 38px;border-radius: 0;">获取手机号</button>
					</div>
				</view>
			</view>
		</view>
		<view class="exitLogin" @click="saveBtn" style="background-color: #0066d4; color: #fff;margin: 20rpx;border-radius: 10rpx">
			保存
		</view>
		<!-- <view class="exitLogin" @click="exitLogin">
			退出登录
		</view> -->
		<u-gap height="100"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					wxName: '',
					wxPhone: ''
				}
			}
		},
		computed: {
			getUserInfo() {
				if (Object.keys(this.$store.state.userInfo).length != 0) {
					return this.$store.state.userInfo
				} else if (Object.keys(uni.getStorageSync('userInfo')).length != 0) {
					return uni.getStorageSync('userInfo')
				} else {
					return {
						// avatarUrl: "",
						id: null,
						openId: "",
						unionId: "",
						wxName: "",
						wxPhone: "",
					}
				}
			}
		},
		onLoad() {
			this.userInfo = this.getUserInfo;
		},
		methods: {
			uploadAvatar() {
				this.$upload.PhotoOrVideo((path) => {
					uni.showLoading({ title: '头像上传中...' })
					this.$api['userAvatar']({
						avatar: path
					}).then(res => {
						this.$api.getUserInfo().then((u) => {
							this.$store.commit('setUserInfo', u.data)
							uni.showToast({
								title: '修改成功！'
							})
						})
					})
				}, {
					type: 1
				})
			},
			exitLogin() {
				uni.showModal({
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							if (uni.getStorageSync('userInfo')) {
								this.$api.logout().then(res => {
									uni.removeStorageSync('tokenInfo')
									uni.removeStorageSync('userInfo')
									this.$Router.replaceAll({ name: 'login' })
								})
							} else {
								this.$Router.replaceAll({ name: 'login' })
							}
						}
					}
				})
			},
			saveBtn() {
				this.$api.updateUserInfo({
					id: this.getUserInfo.id,
					...this.userInfo,
				}).then(async (res) => {
					this.$store.commit('setUserInfo', {
						...this.getUserInfo,
						...this.userInfo,
						...res.data?.data
					});
					uni.showToast({
						title: '保存成功！'
					});
				})
			},
			decryptPhoneNumber(res) {
				if (res.detail.errMsg == 'getPhoneNumber:ok') {
					
				} else {
					uni.showToast({
						title: '用户取消',
						icon: 'none'
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	.bgColor{
		position: relative;
		display: flex;
		align-items: center;
		height: 330rpx;
		margin-top: 0;
		padding: 0 30rpx 60rpx;
		background: linear-gradient(180deg, #3399FF 0%, #0080FF 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		.avatar{
			width: 150rpx;
			height: 150rpx;
			margin-right: 35rpx;
			border-radius: 50%;
		}
		.arrow{
			position: absolute;
			right: 30rpx;
			width: 16rpx;
			height: 28rpx;
		}
		.userText{
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 28rpx;
			.name{
				margin-bottom: 15rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}
	.id-types {
		display: flex;
		flex-direction: row;
		padding: 30rpx 0 34rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 12rpx 0px rgba(0, 128, 255, 0.1);
		border-radius: 12rpx;
		position: relative;
		z-index: 99;
		margin: -76rpx 28rpx 0;
	
		.id-type-item {
			flex: 1;
			text-align: center;
	
			.id-type-icon {
				display: block;
				width: 64rpx;
				height: 64rpx;
				margin: 0 auto 10rpx;
			}
	
			.id-type-text {
				font-size: 28rpx;
			}
		}
	}
	.cellGroup{
		margin: 30rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		&>view{
			display: flex;
			align-items: center;
			padding: 25rpx;
			color: #333333;
			font-size: 28rpx;
			image{
				width: 64rpx;
				height: 64rpx;
				margin-right: 12rpx;
			}
			&>image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 0;
			}
			.u-flex{
				&>view{
					
				}
			}
		}
		&>view:nth-child(n+2){
			border-top: 1rpx solid #E6E6E6;
		}
	}
	.cellGroupAdmin{
		margin: 30rpx 0;
		background-color: #FFFFFF;
		&>view{
			display: flex;
			align-items: center;
			height: 120rpx;
			margin: 0 28rpx;
			color: #333333;
			font-size: 28rpx;
			image{
				width: 64rpx;
				height: 64rpx;
				margin-right: 12rpx;
			}
			&>image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 0;
			}
		}
		&>view:nth-child(n+2){
			border-top: 1rpx solid #E6E6E6;
		}
	}
	.exitLogin{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		margin-top: 24rpx;
		color: #333333;
		font-size: 28rpx;
		background-color: #FFFFFF;
	}
</style>
